<template>
	<div class="member_list_wrapper">
		<div class="operate">
			<el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="handleCheckboxAllChecked" :disabled="data.length === 0">
				{{ checkedMember.length > 0 ? `已选 ${checkedMember.length} 项` : '全选' }}
			</el-checkbox>
			<el-button-group v-if="checkedMember.length > 0">
				<el-button size="small" type="text" icon="el-icon-delete" @click="handleDeleteMemeber()">批量删除</el-button>
				<el-button size="small" type="text" icon="iconfont icon-sw-arrow-swap" @click="handleMoveMember()">批量移动</el-button>
			</el-button-group>
		</div>
		<el-checkbox-group class="member" v-model="checkedMember" @change="handleCheckboxChecked">
			<div class="item" v-for="(item, index) in data" :key="index">
				<el-checkbox :label="item.id">&nbsp;</el-checkbox>
				<div class="img">
					<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
					<i class="el-icon-remove-outline" @click="handleDeleteMemeber(item)"></i>
				</div>
				<h4>{{ item.pcName }}</h4>
			</div>
			<div class="plus" @click="handleaddedMember()">
				<i class="el-icon-plus"></i>
				<h4>添加成员</h4>
			</div>
		</el-checkbox-group>
		<select-user v-model="userDialog" :role-id="roleId"></select-user>
	</div>
</template>

<script>
import selectUser from './user';
import { mapGetters } from 'vuex';
import { batchDelLibMember } from '@/api/data/tbNetPower';
export default {
	components: { selectUser },
	inject: ['refreshMember'],
	props: {
		data: {
			type: Array,
			default: () => []
		},
		roleId: {
			type: String,
			default: ''
		},
		roleList: {
			type: Array,
			default: () => {}
		}
	},
	data() {
		return {
			allChecked: false,
			checkedMember: [],
			isIndeterminate: false,
			memberListData: [],
			selectValue: '',
			userDialog: false
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		checkedMemberData() {
			return this.checkedMember.map((item) => {
				return this.data.find((n) => n.id === item);
			});
		}
	},
	watch: {
		roleId(val) {
			if (val == 0) return false;
			this.allChecked = false;
			this.checkedMember = [];
			this.isIndeterminate = false;
		}
	},
	mounted() {
		console.log(this.$store);
	},
	methods: {
		//全选操作
		handleCheckboxAllChecked(flag) {
			this.checkedMember = !flag ? [] : this.data.map((item) => item.id);
			this.isIndeterminate = false;
		},

		//选择操作
		handleCheckboxChecked(arr) {
			let count = arr.length;
			this.allChecked = count === this.data.length;
			this.isIndeterminate = count > 0 && count < this.data.length;
		},

		//添加库成员
		handleaddedMember() {
			this.userDialog = true;
		},

		//删除库成员
		handleDeleteMemeber(data) {
			let that = this;
			let tipTexts = '';
			if (!data) {
				this.checkedMemberData.forEach((item) => {
					tipTexts += `【${item.pcName}】`;
				});
			} else {
				tipTexts = `【${data.pcName}】`;
			}
			that.$confirm(`此操作将永久删除库成员<font color="#f00">${tipTexts}</font>, 是否继续?`, '删除提示', {
				type: 'warning',
				dangerouslyUseHTMLString: true,
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteLibMemberRequest(data);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除库成员请求
		async deleteLibMemberRequest(data) {
			let params = { id: !data ? this.checkedMember.join() : data.id };
			let result = await batchDelLibMember(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除库成员成功');
				this.refreshMember();
			} else {
				this.$message.error('删除库成员失败');
			}
		},

		//移动库成员
		handleMoveMember() {
			let that = this;
			that.$msgbox({
				title: '移动库成员提示',
				message: that.$createElement('div', null, [
					that.$createElement('p', { style: { 'margin-bottom': '10px' } }, '请选择资源库角色'),
					that.$createElement('sw-select', {
						attrs: { size: 'medium' },
						props: { data: that.roleList, prop: { label: 'name', value: 'id' }, value: that.selectValue, placeholder: '资源库角色' },
						style: { width: '100%' },
						on: {
							input: (e) => {
								that.selectValue = e;
							}
						}
					})
				]),
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.moveLibMemberRequest();
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//移动库成员请求
		moveLibMemberRequest() {
			let params = {};
			console.log(this.selectValue);
		}
	}
};
</script>

<style lang="scss" scoped>
.member_list_wrapper {
	.operate {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		height: 28px;
		padding: 16px;
		.el-button-group {
			margin-left: 16px;
			padding: 0 10px;
			border-radius: 12px;
			background-color: var(--primary-background-disabled);
		}
		.el-button {
			padding: 6px;
		}
	}
	.member {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		flex: 1;
		width: 100%;
		margin-top: 1px;
		overflow: auto;
		padding: 0 8px;
		box-sizing: border-box;
		h4 {
			font-size: 14px;
			line-height: 20px;
			font-weight: normal;
			text-align: center;
			margin-top: 8px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.item {
		position: relative;
		width: 10%;
		padding: 0 8px 16px;
		box-sizing: border-box;
		.el-checkbox {
			position: absolute;
			top: 0;
			left: 8px;
		}
		.img {
			position: relative;
			width: 100%;
			padding-top: 100%;
			img {
				display: block;
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				object-fit: cover;
			}
			i {
				position: absolute;
				inset: 0;
				color: #fff;
				font-size: 24px;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
				display: none;
			}
			&:hover i {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.plus {
		width: 10%;
		padding: 0 8px 16px;
		box-sizing: border-box;
		i.el-icon-plus {
			position: relative;
			width: 100%;
			padding-top: 100%;
			font-size: 24px;
			border-radius: 50%;
			border: dashed 1px #dcdfe6;
			cursor: pointer;
			&::before {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}
</style>
